Si tenemos una imagen de fondo en el blog podemos añadirle un efecto que le aporte calidez con una segunda imagen de fondo.

Imagen única en body


Resultado con pattern


La segunda imagen que añadiremos será de tipo pattern este tipo de imágenes se usan en la repetición de elementos gráficos. El formato aconsejado es png (fondo transparente) porque esa transparencia será la que permitirá visualizar la imagen de body.
Para el tamaño escogeremos 2x2. El resultado sería algo así.



Si visualizamos el blog a gran tamaño será más perceptible la imagen que añadimos de fondo transparente.


Los estilos de body los dejaremos como están con la imagen de fondo que ya teníamos añadida, si no la tenemos podemos ver la forma de añadirla en las siguientes entradas. 1 - 2

Justo antes de ]]></b:skin> añadiremos los estilos para la imagen que hemos creado.

.background2 {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(Url-pattern-png) repeat top left;
}

Luego buscamos <div id='content-wrapper'> y justo después añadimos:

<div class="background2"></div>

Unknown

Qué bello queda!

Besitos y buena semana ƸӜƷ

Responder
Allan Fixnet Uster

SHOW QUERIDA!SHOW!

Responder
Henry Herrera

Hola gemma tengo un problemita, en la plantilla que estoy tuneando:
http://pdtemplate.blogspot.com

Me tope con que el margen izquierdo de las entradas sale muy pegado al borde, asi como el margen derecho de la sidebars se "Roban" 2 letras.

Se que tiene algo que ver con padding-right e intente ponerlo en #main-wrapper y la #sidebar-wrapper pero no me funciono :$.

Serias tu, tan amable :'( de indicarme que debo de agregarle para solvertar dicho problema, de antemano muchisimas gracias.

Responder
Gem@

:: Hola Graciela, besitos y feliz semana también para ti ;)

:: Taillard me alegra que te guste :)

:: Henry al parecer estabas modificando la plantilla porque desaparecía el color de la sidebar, mira los siguientes códigos son los que he modificado puedes sustituir los de tu plantilla por ellos:

#sidebar-wrapper {
display: inline;
float: right;
margin: 0 0 5px 20px;
min-height: 1px;
padding: 25px 20px 5px 22px;
position: relative;
width: 390px;
word-wrap: break-word;
background: #fff;
}

.sidebar .widget, .main .widget {
border-bottom: 1px dotted #CCCCCC;
margin: 0 0 1.5em;
padding: 0 0 5px 5px;
}

.post {
border-bottom: 1px dotted #CCCCCC;
margin: 0.5em 0 1.5em;
padding: 1.5em;
}

.PopularPosts img {
padding-right: 16px;
padding-top: 5px;
}

Mira en vista previa porque igual has seguido haciendo cambios y entonces no resultaría igual que yo los veo :)

Responder
Cêz

Que hermosa entrada con una buena explicación y te luciste con las imagenes (adoro la fotografía), nunca se me ocurría eso de poner doble fondo. Tengo una idea: poner el nombre del blog X en alguna parte del segundo fondo como si fuese marca de agua a la hora de "enchular" el blog.

Responder
Gem@

:: Eso es lo qu emás me gusta de todo esto Céz, la posibilidad de experimentar cosas nuevas.
Tu idea es buena y también puedes añadir esa imagen sin necesidad de añadirla de fondo, incluso con la propiedad fixed para que sea una imagen estática.

Responder
Henry Herrera

Retrocedi unos pasos atras con la tuneada (volvi a colocar la plantilla minima), pero igual seguia fallando(defecto de fabrica seguramente), le agregue los codigos que me sugeristes y ahora si se despliega correctamente.

Muchas gracias por el tip, de una vez lo guardamos entre mis tutoriales para tunear blogs.

Responder
Unknown

Hola, Julia. ¿Qué tal?
Me gustaría redondear las esquinas de mi blog. ¿Cómo lo podría hacer? Por cierto, ¿hay alguna forma de que las esquinas redondeadas se vean también en Explorer?

Muchas gracias.

Responder
Gem@

:: Me alegra esté solucionado entonces Henry :)

:: Fran puedes redondear esquinas con CSS de la siguiente forma:
http://gemablog-.blogspot.com/2008/08/dividir-secciones-con-css.html

Como bien supones Explorer mostrará líneas rectas pero Vagabundia tiene una entrada que no consigo encontrar que con un script las muestra también en Explorer :)

Responder
Unknown

Hola, Julia. Tengo una imagen de fondo y en el centro un fondo en blanco. Me gustaría redondear las esquinas de la parte del fondo blanco. ¿Qué parte del código tendría que modificar? http://cosasquenosedebencontar.blogspot.com

Otra de las cosas que quiero modificar es la de los comentarios recientes. Me gustaría que el diseño de esa parte se viera como el de los comentarios recientes de esta web: http://vegamusic.es

Responder
Gem@

:: Para redondear esas esquinas puedes hacerlo en

.content-inner {
background-color: #FFFFFF;
aquí las propiedades de border-radius
}

http://gemablog-.blogspot.com/2009/09/border-radius.html

Para esos estilos de los útimos comentarios prueba con esata forma de hacerlo, luego ya personalizamos el nombre del autor
http://gemablog-.blogspot.com/2007/08/ltimos-comentarios-con-fechanombrettulo.html

Responder
Unknown

Muchas gracias, Julia. Ya he redondeado las esquinas y también se ven en explorar porque que he usado la entrada que me comentabas de vagabundia.

He probado lo de los comentarios. Pero se queda el nombre del autor arriba y el comentario abajo (quiero que esté alineado), no sé poner un fondo de color al nombre del autor y tampoco sé como quitar los puntos negros y el bullet que puse en la sidebar (sólo lo quiero quitar en los comentarios recientes) que aparecen por defecto. Si me puedes ayudar para solucionar todo esto...

Responder
Gem@

:: No lo veo añadido Fran, de todas formas en esa misma entrada que te indicaba viene explicado donde puedes modificar los estilos.
Igual no queda paralelo el nombre con e comentarios pero puedes añadirle color de fondo.

Responder
Unknown

Hola, Julia. Ya conseguí poner los comentarios recientes como quería. Pero ahora tengo un problema. No sé si tendrá algo que ver con que me he comprado un dominio pero ayer en explorer se veía todo sin problema y ahora la cabecera sale descentrada y los títulos de la sidebar que modifiqué ayer no se ven, junto con los últimos comentarios. La nueva dirección es www.fran-rodriguez.es
Tanto en firefox como en chrome se ve sin problemas el blog, pero en explorer falla todo. Tampoco se ven las esquinas redondas en explorer. Utilizo de hosting google sites y para las esquinas redondas tuve que subir ese archivo ahí. ¿Esto último tiene que ver con el cambio del dominio?

Responder
Gem@

:: En es tema siento no poder ayudarte Fran, lo desconozco totalmente :S

Responder
Unknown

¿Y tampoco me podrías ayudar con el tema de la cabecera descentrada? Es que el menú queda centrado, pero la imagen se ve desplazada hacia la derecha :S
Es la misma imagen que tenía antes de cambiar el dominio, tiene las mismas dimensiones, lo que pasa que la eliminé y la volví a subir para cambiar un texto que había en ella.

Responder
Gem@

:: Por lo que he podido ver con la etiqueta meta para IE=8 que has añadido está solucionado, siento llegar tarde :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top